<template lang="html">

  <div class="publicBox">
    <div class="publicBoxContent allOrder">
      <div class="allOrderSerach">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="订单编号">
            <el-input v-model="formInline.order_no" placeholder="请输入订单编号"></el-input>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="formInline.goods_name" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="请输入内容" v-model="content" class="input-with-select">
              <el-select v-model="type" slot="prepend" placeholder="请选择">
                <el-option label="用户名" value="1"></el-option>
                <el-option label="手机号" value="2"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item label="订单时间">
            <el-date-picker v-model="time" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" :default-value=" year + '-' + month"
                            :picker-options="expireTimeOption"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('serach')" icon="el-icon-search">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="allOrderBox">
        <el-radio-group v-model="dataType" @change="onSubmit('title')" style="margin-bottom: 30px;">
          <el-radio-button label="all">
            全部
<!--            <div class="hh" v-if="listTotal.all!=0">{{listTotal.all}}</div>-->
          </el-radio-button>
          <el-radio-button label="pay1">
            待付款(一般贸易)
            <div class="hh" v-if="listTotal.pay_general!=0">
              {{listTotal.pay_general}}
            </div>
          </el-radio-button>
          <el-radio-button label="pay2">
            待付款(保税)
            <div class="hh" v-if="listTotal.pay_tax!=0">
              {{listTotal.pay_tax}}
            </div>
          </el-radio-button>
          <el-radio-button label="pay3">
            待付款(直邮)
            <div class="hh" v-if="listTotal.pay_direct!=0">
              {{listTotal.pay_direct}}
            </div>
          </el-radio-button>
          <el-radio-button label="delivery">
            待发货
            <div class="hh" v-if="listTotal.delivery!=0">
              {{listTotal.delivery}}
            </div>
          </el-radio-button>
          <el-radio-button label="receipt">
            待收货
            <div class="hh" v-if="listTotal.receipt!=0">
              {{listTotal.receipt}}
            </div>
          </el-radio-button>
          <el-radio-button label="complete">
            已完成
            <!--            <div class="hh" v-if="listTotal.complete!=0">-->
            <!--              {{listTotal.complete}}-->
            <!--            </div>-->
          </el-radio-button>
          <el-radio-button label="cancel">
            已取消
            <!--            <div class="hh" v-if="listTotal.cancel!=0">-->
            <!--              {{listTotal.cancel}}-->
            <!--            </div>-->
          </el-radio-button>
        </el-radio-group>
        <div class="allOrderBoxTable">
          <div class="allOrderTitle">
            <div class="titleLeft">
              <table>
                <tr>
                  <td style="width: 70% !important">商品</td>
                  <td style="width: 15% ">单价/数量</td>
                  <td style="width: 15% ">贸易类型</td>

                </tr>
              </table>
            </div>
            <div class="titleRight">
              <table>
                <tr>
                  <td>下单用户</td>
                  <td>手机号码</td>
                  <td>订单金额</td>
                  <td>订单状态</td>
                  <td>操作</td>
                </tr>
              </table>
            </div>
          </div>
          <div v-show="loadshow" class="loadingBox">
            <el-row v-loading="loading"
                    element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" >
              <el-col></el-col>
            </el-row>
          </div>
          <div v-show="!loadshow" class="userOrder" v-for="(item,index) in orders" :key="index">
            <div class="userOrderTop">
              <span>订单编号：</span><span class="orderNo">{{item.child_no}}</span>
              <span style="margin-left: 30px">下单时间：</span><span>{{item.create_at}}</span>
              <span class="statusBtn"
                    @click="goto(item.order_child_id)">订单详情</span>
            </div>
            <div class="orderDisplay">
              <div class="displayLeft" ref='dom'>
                <table v-for="(goods,inde) in item.goods" :key="inde">
                  <tr>
                    <td class="diplayImg clearfix">
                      <div class="bianh">
                        <div class="dImg">
                          <img :src="JSON.parse(goods.image)[0]" alt="">
                        </div>
                        <div class="dCon">
                          <div class="name" @click="goDetail(goods.goods_id)">{{goods.goods_name}}</div>
                          <div class="sum" v-for="(ite,inde) in goods.attr">{{ite[0]}}：{{ite[1]}}<span
                              v-show="ite[0]=='数量' && goods.unit!=''">（{{goods.unit}}）</span></div>
                        </div>
                      </div>
                    </td>
                    <td class="displayCon1">
                      <div>￥{{parseFloat(goods.goods_price)}} </div>
                      <div>x{{goods.total_num}} </div>
                    </td>
                    <td class="displayCon">{{goods.trade_type_name}}</td>

                  </tr>
                </table>
              </div>
              <div class="displayRight">
                <table>
                  <tr :style="{ height:(trH + 3)*item.goods.length +'px' }">
                    <td>{{item.name}}</td>
                    <td>{{item.phone}}</td>
                    <td class="money">
                      {{item.pay_price}}
                      <p>(含运费：{{item.shipping_amount}})</p>
                    </td>
                    <td>
                      <span v-if="[1,2,3,4].indexOf(item.order_status) != -1">待发货 </span>
                      <span v-else-if="item.order_status==5">待收货</span>
                      <span v-else>{{item.status_name}} </span>
                    </td>
                    <td>
                      <!--                      <span class="statusBtn"-->
                      <!--                            @click="$router.push({path : `/index/order/orderDetails?orderId=${item.order_child_id}`})">订单详情</span>-->
                      <span class="statusBtn immediatePayment" v-if="item.order_status==0"
                            @click="beforPlay(item.order_main_id,item.order_child_id,item.pay_price,item.goods[0].trade_type_name)">立即付款</span>
                      <span class="statusBtn cancal" v-if="item.order_status==0"
                            @click="cancelOrder(item.order_child_id)">取消订单</span>
                      <span class="statusBtn immediatePayment" v-if="[1,2].indexOf(item.order_status) != -1"
                            @click="goto(item.order_child_id)">前往退款</span>
                      <span class="statusBtn immediatePayment" v-if="item.order_status==5" @click="confirmReceipt(item.order_child_id)">确认收货</span>


                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="noDingdan" v-if="!loadshow && total<=0">
        <img src="../../assets/img/pc_wudingan.png" alt="暂无"/>
      </div>

      <div class="allOrderPage"  v-if="!loadshow">
        <el-pagination background @current-change="handleCurrentChange" :page-size="pageSize" :current-page.sync="page"
                       layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>

    <el-dialog
        title=""
        :close-on-click-modal=false
        :close-on-press-escape=false
        :show-close=false
        :visible.sync="centerDialogVisible"
        width="30%"
        top="35vh"
        center>
      <div class="pay" v-show="isShow=='3'">
        <div @click="payT=0" >
          <img src="../../assets/img/wxzf.png"/>
          <span :class="[payT== 0 ? 'wxzf' : '']">微信支付</span>
        </div>
        <div class="feng" v-if="currtType"></div>
        <div @click="yePlay" v-if="currtType">
          <img src="../../assets/img/yezf.png"/>
          <span :class="[payT== 1 ? 'yezf' : '']">余额支付</span>
        </div>

<!--        <div @click="payT=0">微信支付</div>-->
<!--        <div @click="payT=1" v-if="currtType">余额支付</div>-->
      </div>
      <div style="height: 250px">
        <div v-show="isShow=='1'">
          <div class="loadingBox" v-loading="loading"
               element-loading-text="正在支付，请等待......" element-loading-spinner="el-icon-loading">
          </div>
          <p class="tswz">预计等待5-10s</p>
        </div>

        <div class="nowPlay" v-show="isShow=='3'">
          <div class="clonse" @click="clea"></div>
          <template v-if="payT==1 &&  currtType">
            <strong style="margin-bottom: 20px">订单金额：<span class="ddje">￥{{currtMoney}}</span></strong>

            <div>
              当前账户余额(元)：￥{{ shopInformation && shopInformation.balance}}
            </div>
            <div v-if=" parseFloat(currtMoney) > parseFloat(shopInformation.balance)">
              余额不足，请充值
            </div>
            <div class="line"></div>
            <el-button type="primary" @click="nowPlay(10)" v-if=" parseFloat(currtMoney) <= parseFloat(shopInformation.balance)">立即支付</el-button>
          </template>
<template v-if="payT==0 &&  payUrl">
            <div class="qrCode">
              <img   :src="payUrl"/>
            </div>
            <div class="plasePay">请扫码支付：<span>￥</span><span>{{currtMoney}}</span></div>
<!--            <el-button type="success" v-if="isplay" @click="clea">确认支付</el-button>-->
<!--            <el-button type="success" v-else disabled >确认支付</el-button>-->
          </template>
<template v-if="payUrl =='' &&payT==0 && wxzf">
            <div>暂不支持</div>
          </template>

</div>


</div>

</el-dialog>
</div>
</template>

<script>
    // var payInterval=null;
    export default {
        name: "allOrder",
        data() {
            return {
                expireTimeOption: {
                    disabledDate(date) {
                        //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
                        return date.getTime() > Date.now();
                    }
                },
                loadshow: true,
                loading: true,
                payT: 0,
                year: 0,
                payInterval: null,
                month: 1,
                isShow: 3,
                shopInformation: {},
                centerDialogVisible: false,
                trH: 90,
                formInline: {
                    order_no: "",
                    start_time: "",
                    end_time: "",
                    name: "",
                    phone: "",
                    goods_name: "",
                    type_name: "",
                    type: "all",
                },
                content: "",
                dataType: "all",
                type: "",
                time: "",
                hideArr: [],
                page: 1,
                pageSize: 15,
                total: 0,
                orders: [],
                orderId: 0,
                currtMoney: 0,
                childID: [],
                listTotal: {
                    all: 0,
                    cancel: 0,
                    complete: 0,
                    delivery: 0,
                    pay_direct: 0,
                    pay_general: 0,
                    pay_tax: 0,
                    receipt: 0,
                },
                searchBZ: 'search',
                payUrl: '',
                isplay: false,
                currtType: true,
                wxzf: false,
                Int: false,
                pageNum: 0,



            };
        },
        beforeRouteLeave(to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`

            if (to.name != "orderDetails") {
                localStorage.removeItem('page');
                localStorage.removeItem('orderType');
                localStorage.removeItem('typeName');
            }
            next();
        },
        created() {
            this.Int = true;
            this.month = new Date().getMonth();
            this.year = new Date().getFullYear();
            if (this.month == 0) {
                this.year = this.year - 1;
                this.month = 12;
            }
            if (localStorage.getItem("page")) {
                this.page = parseInt(localStorage.getItem("page"));
            }
            if (localStorage.getItem("orderType")) {
                this.dataType = localStorage.getItem("orderType");
                if (["pay1", "pay3", "pay2"].indexOf(this.dataType) != -1) {
                    this.formInline.type = "pay";
                } else {
                    this.formInline.type = this.dataType;
                }

                this.formInline.type_name = localStorage.getItem("typeName");

            } else {
                localStorage.setItem("orderType", "all");
            }

            this.getUserInfo();
            this.getList();



        },
        mounted() {
            // console.log(this.$refs.dom)
            // this.trH=document.getElementById('displayLeft').offsetHeight;
        },
        destroyed() {

            clearInterval(this.payInterval);
        },
        methods: {
            goDetail(id) {
                this.$router.push({
                    path: `/index/commodity/detail?id=${id}`
                })
            },
            yePlay() {
                this.payT = 1;
                // clearInterval(this.payInterval);
            },
            goto(id) {
                clearInterval(this.payInterval);
                this.$router.push({
                    path: `/index/order/orderDetails?orderId=${id}`
                })
            },
            clea() {
                this.centerDialogVisible = false;
                clearInterval(this.payInterval);
                this.getList();
            },
            getListTotal() {
                this.$HttpGet("/index.php?s=/admin/order/all_total", {}).then(res => {
                    this.listTotal = res.data
                })
            },
            confirmReceipt(childId) {
                this.$HttpGet("/index.php?s=/admin/order/receipt", {
                    order_child_id: childId,
                }).then(res => {
                    if (res.code == 0) {
                        this.pageNum -= 1;
                        if (this.pageNum <= 0) {
                            if (this.page != 1 && this.page == this.total) {
                                this.page -= 1;
                                localStorage.setItem("page", this.page);
                            }

                        }
                        this.getList();
                        this.$notifySuccess('收货成功')
                    }

                })
            },
            cancelOrder(childId) {

                this.$HttpGet("/index.php?s=/admin/order/cancel", {
                    order_child_id: childId,
                }).then(res => {
                    if (res.code == 0) {
                        this.getList();
                        this.$notifySuccess('取消成功')
                    }

                })
            },
            beforPlay(id, child, money, tradeType) {
                this.orderId = id;
                this.currtMoney = money;
                this.centerDialogVisible = true;
                this.childID = [child];
                this.currtType = true;
                if (this.payInterval) {
                    clearInterval(this.payInterval);
                }
                if (tradeType == '保税') {
                    this.currtType = false;

                }
                this.nowPlay(20, tradeType);
            },
            nowPlay(payType = 10, tradeType) {
                this.isShow = 3;
                this.payT = 0;
                if (payType == 10) {
                    this.isShow = 1;
                }

                this.$HttpPost("/index.php?s=/admin/home.order/pay", {
                    order_id: this.orderId,
                    payType: payType,
                    cheild_id: this.childID
                }).then(res => {
                    var that = this;
                    if (res.data.payment == false) {
                        if (tradeType == "保税") {
                            this.payT = 0;
                        } else {
                            this.payT = 1;
                        }

                        this.wxzf = true;
                    }

                    if (res.code == 0 && payType == 10) {
                        clearInterval(this.payInterval);
                        this.centerDialogVisible = false;
                        this.$notifySuccess(res.msg.success);
                        this.getList();
                        // this.$router.push({path: `/index/order/allOrder`});
                    }
                    if (res.code == 0 && payType == 20 && res.data.payment != false) {
                        this.payUrl = res.data.payment;
                        this.payInterval = setInterval(() => {
                            this.$HttpGet(`/index.php?s=/admin/home.order/pay_wechat_status&order_id=${that.orderId}`, {

                            }).then(res => {
                                if (res.data != '未完成支付') {

                                    this.isplay = true;
                                    this.$notifySuccess('支付成功');
                                    this.getList();
                                    clearInterval(this.payInterval);
                                }
                            })
                        }, 1000)
                    }


                })
            },
            getUserInfo() {
                this.$HttpGet("/index.php?s=/admin/index/details").then(res => {
                    this.shopInformation = res.data
                })
            },
            onSubmit(type) {
                this.loadshow = true;
                this.page = 1;
                localStorage.setItem("page", 1);
                // if (type == 'title') {
                //     this.formInline = {
                //         order_no: "",
                //         start_time: "",
                //         end_time: "",
                //         name: "",
                //         phone: "",
                //         goods_name: "",
                //         type_name: "",
                //         type: "all",
                //     };
                // }


                if (type == 'serach') {
                    this.dataType = 'all';
                    this.formInline.type_name = "全部";
                    this.formInline.type = this.dataType;
                    this.searchBZ = 'search';

                } else {
                    localStorage.setItem("orderType", this.dataType);
                    this.Int = false;

                    this.searchBZ = 'title';
                    switch (this.dataType) {
                        case "all":
                            this.formInline.type_name = "全部";
                            this.formInline.type = this.dataType;
                            localStorage.setItem("typeName", "全部");
                            break;
                        case "delivery":
                            this.formInline.type_name = "待发货";
                            this.formInline.type = this.dataType;
                            localStorage.setItem("typeName", "待发货");
                            break;
                        case "receipt":
                            this.formInline.type_name = "待收货";
                            this.formInline.type = this.dataType;
                            localStorage.setItem("typeName", "待收货");
                            break;
                        case "complete":
                            this.formInline.type_name = "已完成";
                            this.formInline.type = this.dataType;
                            localStorage.setItem("typeName", "已完成");
                            break;
                        case "cancel":
                            this.formInline.type_name = "已取消";
                            this.formInline.type = this.dataType;
                            localStorage.setItem("typeName", "已取消");
                            break;
                        case "pay1":
                            this.formInline.type = "pay";
                            this.formInline.type_name = "待付款（一般贸易）";
                            localStorage.setItem("typeName", "待付款（一般贸易）");
                            break;
                        case "pay2":
                            this.formInline.type = "pay";
                            this.formInline.type_name = "待付款（保税）";
                            localStorage.setItem("typeName", "待付款（保税）");
                            break;
                        case "pay3":
                            this.formInline.type = "pay";
                            this.formInline.type_name = "待付款（直邮）";
                            localStorage.setItem("typeName", "待付款（直邮）");
                            break;
                    }
                }


                if (this.time && this.time.length > 0) {
                    this.formInline.start_time = this.time[0];
                    this.formInline.end_time = this.time[1];
                } else {
                    this.formInline.start_time = "";
                    this.formInline.end_time = "";
                }
                this.formInline.name = "";
                this.formInline.phone = "";
                if (this.content) {
                    if (this.type == "1") {
                        this.formInline.name = this.content;
                    } else if (this.type == "2") {
                        this.formInline.phone = this.content;
                    }
                }


                this.page = 1;
                this.getList();

            },
            getList() {
                this.pageNum = 0;
                this.$HttpGet("/index.php?s=/admin/order/all_list", {
                    page: this.page,
                    pageSize: this.pageSize,
                    ...this.formInline
                }).then(res => {

                    if (res.code == 0) {
                        this.pageNum = res.data.list.data.length
                    }
                    this.orders = res.data.list.data;
                    if (this.Int) {
                        this.Int = false;
                        this.getListTotal();
                    }


                    //总价
                    // for (let i = 0; i < this.orders.length; i++) {
                    //     this.orders[i].numPlay = 0;
                    //     for (let j = 0; j < this.orders[i].goods.length; j++) {
                    //         this.orders[i].numPlay += parseFloat(this.orders[i].goods[j].total_pay_price);
                    //
                    //     }
                    // }
                    //拆分规格
                    for (let i = 0; i < this.orders.length; i++) {
                        for (let x = 0; x < this.orders[i].goods.length; x++) {
                            var arr = this.orders[i].goods[x].goods_attr.split("|");
                            var endArr = arr.map((item, index) => {
                                return item.split("_")
                            });
                            endArr.pop();
                            this.orders[i].goods[x].attr = endArr;

                        }
                    }
                    this.total = res.data.list.total;
                    this.loadshow = false;
                })
            },
            handleCurrentChange(page) {
                this.page = page;
                localStorage.setItem("page", page);
                this.getList();
            }
        },

    };
</script>

<style lang="scss" scoped>
    .allOrder {
        min-width: 850px;
        .allOrderSerach {
            /deep/ .input-with-select .el-input-group__prepend {
                background-color: #fff;
                color: #606266;
                .el-select .el-input {
                    width: 130px;
                }
            }
        }
        .allOrderBox {
            margin-top: 20px;
            /*min-width: 1620px;*/
            /deep/ .el-radio-group {
                .el-radio-button {
                    .el-radio-button__inner {
                        position: relative;
                        display: flex;
                        justify-content: space-around;
                        align-self: center;
                        font-weight: bold;
                        .hh {
                            height: 14px;
                            position: relative;
                            color: #F56C6C;
                            font-size: 15px;
                            text-align: center;
                            line-height: 14px;
                            margin-left: 5px;
                        }
                    }
                }
                .is-active {
                    .el-radio-button__inner {
                        .hh {
                            color: #FFFFFF;
                        }
                    }
                }
            }
            .allOrderBoxTable {
                .allOrderTitle {
                    display: flex;
                    justify-content: space-between;
                    .titleLeft,
                    .titleRight {
                        width: 50%;
                        table {
                            width: 100%;
                            tr {
                                td {
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                    .titleLeft {
                        table {}
                    }
                    .titleRight {
                        table {
                            tr {
                                td {
                                    width: 20%;
                                }
                            }
                        }
                    }
                }
                .loadingBox {
                    height: 100px;
                    margin-top: 50px;
                    position: relative;
                    /deep/ .el-loading-mask {
                        background: none;
                        .el-icon-loading {
                            font-size: 30px;
                        }
                    }
                }
                .userOrder {
                    margin-top: 20px;
                    .userOrderTop {
                        height: 38px;
                        background: rgba(#3A61CA, 0.1);
                        border: 1px solid #EEEEEE;
                        font-size: 12px;
                        font-weight: 500;
                        color: rgba(#000000, 0.6);
                        line-height: 38px;
                        text-align: left;
                        padding-left: 10px;
                        .statusBtn {
                            color: #409EFF;
                            cursor: pointer;
                            margin-left: 15px;
                        }
                        .orderNo {
                            color: #000000;
                        }
                    }
                    .orderDisplay {
                        display: flex;
                        .displayLeft {
                            width: 50%;
                            border-bottom: 1px solid #EEEEEE;
                            border-left: 1px solid #EEEEEE;
                            table {
                                width: 100%;
                                tr {
                                    height: 90px;
                                    .displayCon {
                                        width: 15%;
                                    }
                                    .displayCon1 {
                                        width: 15%;
                                        text-align: center;
                                    }
                                    .diplayImg {
                                        width: 70%;
                                        height: 90px;
                                        .bianh {
                                            display: flex;
                                            .dImg {
                                                width: 80px;
                                                height: 90px;
                                                border-right: 1px solid #EEEEEE;
                                                img {
                                                    width: 58px;
                                                    height: 58px;
                                                    margin: 11px;
                                                    margin-top: 16px;
                                                }
                                            }
                                            .dCon {
                                                margin-left: 20px;
                                                font-size: 12px;
                                                .name {
                                                    margin-top: 10px;
                                                    display: -webkit-box;
                                                    -webkit-box-orient: vertical;
                                                    -webkit-line-clamp: 2;
                                                    overflow: hidden;
                                                    line-height: 18px;
                                                }
                                                .sum {
                                                    color: rgba(#000000, .6);
                                                    margin-top: 5px;
                                                }
                                            }
                                        }
                                    }
                                    td {
                                        border-right: 1px solid #EEEEEE;
                                        border-top: 1px solid #EEEEEE;
                                        padding-left: 10px;
                                    }
                                }
                            }
                        }
                        .displayRight {
                            width: 50%;
                            border-top: 1px solid #EEEEEE;
                            border-bottom: 1px solid #EEEEEE;
                            table {
                                width: 100%;
                                height: 100%;
                                tr {
                                    .money {
                                        color: #ea3030;
                                        p {
                                            font-size: 12px;
                                        }
                                    }
                                    td {
                                        width: 20%;
                                        border-right: 1px solid #EEEEEE;
                                        padding-left: 10px;
                                        .statusBtn {
                                            display: block;
                                            margin-bottom: 5px;
                                            color: #409EFF;
                                            cursor: pointer;
                                            width: 64px;
                                            height: 24px;
                                            text-align: center;
                                            line-height: 24px;
                                            border-radius: 6px;
                                        }
                                        .cancal {
                                            background: #FFFFFF;
                                            border: 1px solid #EEEEEE;
                                            color: #333333;
                                        }
                                        .cancal:hover {
                                            background: #EEEEEE;
                                            border: 1px solid #D2D2D2;
                                        }
                                        .immediatePayment {
                                            color: #E93030;
                                            background: #FFFFFF;
                                            border: 1px solid #E93030;
                                        }
                                        .immediatePayment:hover {
                                            background: #E93030;
                                            color: #FFFFFF;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .noDingdan {
            display: flex;
            justify-content: center;
            margin-top: 90px;
        }
        .allOrderPage {
            margin-top: 20px;
            text-align: right;
            margin-bottom: 50px;
        }
    }
    
    .nowPlay {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .ddje {
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #E93030;
        }
        .plasePay {
            span {
                font-size: 20px;
                color: red;
                &:first-child {
                    font-size: 16px;
                    color: red;
                }
            }
        }
        .zfcg {
            color: #E93030;
            font-size: 26px;
            font-weight: bold;
        }
        .qsd {
            font-size: 14px;
            color: #333333;
        }
        .qrCode {
            width: 150px;
            height: 150px;
            cursor: pointer;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .clonse {
            width: 16px;
            height: 16px;
            position: absolute;
            top: -76px;
            right: -10px;
            cursor: pointer;
            background: url("../../assets/img/del.png") no-repeat;
        }
        .line {
            width: 80%;
            height: 1px;
            border-top: dashed #ACC0D8 1px;
        }
        div {
            margin-bottom: 20px;
        }
    }
    
    .tswz {
        position: absolute;
        top: 170px;
        text-align: center;
        width: 100%;
        margin-left: -25px;
        color: #409EFF;
    }
    
    /deep/ .el-dialog {
        min-width: 550px;
        border-radius: 20px;
        .pay {
            position: relative;
            width: 220px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            top: -27px;
            div {
                &:first-child:hover {
                    color: #2CCE30;
                }
                &:last-child:hover {
                    color: #3958ac;
                }
                img {
                    width: 25px;
                    height: 22px;
                    margin-top: -5px;
                }
                span {
                    margin-left: 5px;
                }
                .wxzf {
                    color: #09BB07;
                }
                .yezf {
                    color: #3958AC;
                }
            }
            .feng {
                height: 20px;
                background: #333333;
                border-right: solid #333333 2px;
            }
        }
        /*.pay {*/
        /*  width: 150px;*/
        /*  height: 50px;*/
        /*  display: flex;*/
        /*  justify-content: space-between;*/
        /*  cursor: pointer;*/
        /*}*/
    }
</style>